<template>
  <div class="cardInfo">
    <header>
      <span @click="Gou()">取消</span>
      <span></span>
    </header>
    <div class="messBox">
      <h2>添加银行卡</h2>
      <p>请绑定持卡人本人的银行卡</p>
    </div>
    <div class="infoBox">
      <van-cell-group>
        <van-field
          v-model="value1"
          label="持卡人"
          right-icon="warning-o"
          placeholder="阮晶"
          class="input"
        />
        <van-field
          v-model="value2"
          clearable
          label="卡号"
          class="input"
          right-icon="scan"
          placeholder="持卡人本人银行卡号"
        />
      </van-cell-group>
    </div>
    <div class="imgBox"></div>
    <button @click="Gonext()">下一步</button>
    <p class="pp">由连连支付提供</p>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      value1: "",
      value2: ""
    };
  },
  methods: {
    Gou() {
      this.$router.push("/cardlist");
    },
    Gonext(){
      if(this.value1!==""&&this.value2!==""){
        this.$router.push("/cardLast")
      }else{
        Dialog({ message: "请输入内容"});
      }
      
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.cardInfo {
  width: 100%;
  height: 100%;
  font-size: px2rem(16);
  padding: 0 px2rem(10);
}
header {
  display: flex;
  height: px2rem(50);
  justify-content: space-between;
  align-items: center;
}
.messBox {
  text-align: center;
  margin: px2rem(50) 0;
  h2 {
    font-weight: bold;
  }
  p {
    padding: px2rem(15) 0;
  }
}
.infoBox {
  padding: px2rem(5) px2rem(30);
}
.input {
  padding: px2rem(10) 0;
}
.imgBox {
  width: px2rem(279);
  height: px2rem(82);
  background-image: url("../../assets/icon.png");
  margin: px2rem(40) auto;
}
button {
  padding: px2rem(10) px2rem(50);
  border: 0;
  display: block;
  margin: 0 auto;
  color: #ccc;
  border-radius: px2rem(5);
}
.pp {
  margin: px2rem(75) auto;
  text-align: center;
  font-size: px2rem(12);
}
</style>